<template>
	<view class="w100 flex flex_jc flex_wrap">
		
		<view class="w100 flex flex_jc" style="position: fixed;top: 0;z-index: 9999;"  v-if="show_ad">
			<ad :unit-id="xcx_ad.video" ad-type="video" ad-theme="white"  v-if="show_ad"></ad>
		</view>
		
		<view class="e1 w710 flex flex_wrap" style="padding-top: 20rpx;" :class="show_ad?'mt580':''">
			<view class="avatar hidden">
				<u--image :showLoading="true" :src="userinfo.avatar" width="100%" height="100%"></u--image>
			</view>
			<view class="left">ULTRAMAN</view>
			<view class="right">
				<view class="mr20 txt_r fz25 v1">每日签到</view>
			</view>
		</view>
		<view class="e2 mt30 borr20">
			<view class="title fz40 txt_c mt20">
				连续签到送好礼
			</view>
			<view class="tips txt_r fz25 col_999 mt20" @click="tips_show = true">签到攻略</view>
			<view class="ul flex flex_wrap w100">
				
				<view class="li mt20">
					<view class="p2" v-if="week_count>0">
						<u--image :showLoading="true" src="/static/images/QXvOLROo3Y.png" width="100%" height="100%"></u--image>
					</view>
					<view class="v1 w100 txt_c" :class="week_count>0?'sign_c':''">第一天</view>
					<view class="p1">
						<u--image :showLoading="true" :src="week_count>0?'/static/images/qiandao_1.png':'/static/images/qiandao_0.png'" width="100%" height="100%"></u--image>
					</view>
					<view class="v2 w100 txt_c" :class="week_count>0?'sign_c':''">光能量+1</view>
				</view>
				
				<view class="li mt20">
					<view class="p2" v-if="week_count>1">
						<u--image :showLoading="true" src="/static/images/QXvOLROo3Y.png" width="100%" height="100%"></u--image>
					</view>
					<view class="v1 w100 txt_c" :class="week_count>1?'sign_c':''">第二天</view>
					<view class="p1">
						<u--image :showLoading="true" :src="week_count>1?'/static/images/qiandao_1.png':'/static/images/qiandao_0.png'" width="100%" height="100%"></u--image>
					</view>
					<view class="v2 w100 txt_c" :class="week_count>1?'sign_c':''">光能量+1</view>
				</view>
				
				
				<view class="li mt20">
					<view class="p2" v-if="week_count>2">
						<u--image :showLoading="true" src="/static/images/QXvOLROo3Y.png" width="100%" height="100%"></u--image>
					</view>
					<view class="v1 w100 txt_c" :class="week_count>2?'sign_c':''">第三天</view>
					<view class="p1">
						<u--image :showLoading="true" :src="week_count>2?'/static/images/qiandao_1.png':'/static/images/qiandao_0.png'" width="100%" height="100%"></u--image>
					</view>
					<view class="v2 w100 txt_c" :class="week_count>2?'sign_c':''">光能量+1</view>
				</view>
				
				
				<view class="li mt20">
					<view class="p2" v-if="week_count>3">
						<u--image :showLoading="true" src="/static/images/QXvOLROo3Y.png" width="100%" height="100%"></u--image>
					</view>
					<view class="v1 w100 txt_c" :class="week_count>3?'sign_c':''">第四天</view>
					<view class="p1">
						<u--image :showLoading="true" :src="week_count>3?'/static/images/qiandao_1.png':'/static/images/qiandao_0.png'" width="100%" height="100%"></u--image>
					</view>
					<view class="v2 w100 txt_c" :class="week_count>3?'sign_c':''">光能量+1</view>
				</view>
				
				
				<view class="li mt20">
					<view class="p2" v-if="week_count>4">
						<u--image :showLoading="true" src="/static/images/QXvOLROo3Y.png" width="100%" height="100%"></u--image>
					</view>
					<view class="v1 w100 txt_c" :class="week_count>4?'sign_c':''">第五天</view>
					<view class="p1">
						<u--image :showLoading="true" :src="week_count>4?'/static/images/qiandao_1.png':'/static/images/qiandao_0.png'" width="100%" height="100%"></u--image>
					</view>
					<view class="v2 w100 txt_c" :class="week_count>4?'sign_c':''">光能量+1</view>
				</view>
				
				
				<view class="li mt20">
					<view class="p2" v-if="week_count>5">
						<u--image :showLoading="true" src="/static/images/QXvOLROo3Y.png" width="100%" height="100%"></u--image>
					</view>
					<view class="v1 w100 txt_c" :class="week_count>5?'sign_c':''">第六天</view>
					<view class="p1">
						<u--image :showLoading="true" :src="week_count>5?'/static/images/qiandao_1.png':'/static/images/qiandao_0.png'" width="100%" height="100%"></u--image>
					</view>
					<view class="v2 w100 txt_c" :class="week_count>5?'sign_c':''">光能量+1</view>
				</view>
				
				
				
				
				<view class="li2 mt20">
					<view class="p2" v-if="week_count>6">
						<u--image :showLoading="true" src="/static/images/QXvOLROo3Y.png" width="100%" height="100%"></u--image>
					</view>
					<view class="v1 w100 txt_c col_999" :class="week_count>6?'sign_c':''">第七天</view>
					<view class="p1">
						<u--image :showLoading="true" :src="week_count>6?'/static/images/qiandao_1.png':'/static/images/qiandao_0.png'" width="100%" height="100%"></u--image>
					</view>
					<view class="v2 w100 txt_c col_999">光能量+1加额外光能量+3</view>
				</view>
				
			</view>
		</view>
		<view class="e3 mt20 flex flex_wrap">
			<view class="v1 txt_c borr20" @click="beforeSign()">签到</view>
			<view class="v2 ml20">
				<view class="t1 w100 fz25">光能量：{{user_power}}</view>
				<view class="t2 w100 fz25">累计签到天数：{{sign_count}}</view>
			</view>
		</view>
		<navigator url="/pages/kapai_list/index" class="e4 mt20">
			<u--image :showLoading="true" src="/static/images/guangzhibaoku.png" width="100%" height="100%"></u--image>
		</navigator>
		
		<view class="share flex flex_jc w100">
			<button type="default" open-type="share" >
				<view class="share-box">邀请朋友一起签到</view>
			</button>
		</view>
		
		<view>
			<u-popup :show="tips_show" @close="tipsClose()" mode="bottom">
				<view class="tips_detail">
					<view class="title txt_c w100 mt20">签到攻略</view>
					<view class="w100 mt20 flex flex_wrap flex_jc">
						<view class="t1 fz25">
							<view>1、用户可在小程序中“每日活动”界面进行签到，每位用户每天仅可签到1次，签到即可获得一个光能量奖励和5颗能量石。</view>
							<view>2、每7天为一个签到周期，连续签到达7天后，开启下一个签到周期，漏签从第1天重新开始进行签到。</view>
							<view>3、7天连续签到奖励：完成七天连续签到，可在第7天签到完成后，额外获得3个光能量奖励和一枚凹特蛋另外pk有额外经验加成</view>
							<view>4、累计签到达到相应天数，可额外获得光能量和能量石奖励</view>
							<view>累计签到天数满30天，额外获得25个光能量，25颗能量石；</view>
							<view>累计签到天数满90天，额外获得65个光能量，65颗能量石；</view>
							<view>累计签到天数满180天，额外获得160个光能量，160颗能量石；</view>
							<view>累计签到天数满365天，额外获得365个光能量，365颗能量石；</view>
							<view>5、光能量可用于兑换光之宝库中的精美奖品</view>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {signInit,sign} from "@/api/api"
	export default {
		data() {
			return {
				today_sign:false,
				tips_show: false,
				week_count:0,
				sign_count:0,
				user_power:0,
				continue_sign_count:0,
				userinfo:[],
				sign_click:true,
				is_login:false,
				xcx_ad:getApp().globalData.xcx_ad,
				show_ad:getApp().globalData.show_ad,
			}
		},
		
		onShareAppMessage(e) {
		},
		onShareTimeline(e) {
		},
		
		
		onLoad: function (option) {
			
				  
		},
		onShow:function(){
			this.is_login = uni.getStorageSync('is_login')?uni.getStorageSync('is_login'):false
				
			if(this.is_login){
				this.signInit()
				this.userinfo = uni.getStorageSync('userinfo')
				this.user_power = this.userinfo.power
			}
			
			console.log(this.userinfo)
		},
	
		methods:{
			
			beforeSign(){
				console.log('beforeSign')
				var that = this
				if(!that.today_sign){
					console.log(1)
					that.sign()
				}else{
					that.msg('您今天已签到，请勿重复签到')
				}
			},
			
			sign(){
				console.log(2)
				if(this.isLogin()){
					console.log(3)
					if(!this.sign_click){
						console.log(4)
						var that = this
						that.sign_click = true
						sign().then(res=>{
							console.log(5)
							if(res.code==0){
								that.user_power = that.user_power + res.data.power_count
								that.userinfo.power = that.user_power
								uni.setStorageSync('userinfo',that.userinfo)
								that.week_count = res.data.week_count
								that.sign_count = res.data.sign_count
								that.msg(res.msg)
								setTimeout(function(){
									that.sign_click = false
								},1500)
							}else{
								that.msg(res.msg)
								setTimeout(function(){
									that.sign_click = false
								},1500)
							}
						})
					}
				}
			},
			
			signInit(){
				var that = this
				signInit().then(res=>{
					if(res.code==0){
						that.sign_click  = false
						that.week_count = res.data.week_count
						that.sign_count = res.data.sign_count
						that.continue_sign_count = res.data.continue_sign_count
						that.today_sign = res.data.today_sign
					}
				})
			},
		
			tipsClose() {
				this.tips_show = false
				// console.log('close');
			},
			
			msg(msg){
				uni.showToast({
					title: msg,
					icon:'none'
				});
			},
			
			isLogin(){
				if(this.is_login){
					return true
				}else{
					//登录
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}
			},
			
		
			
			
			jiliAd(){
				var that =this
				// 在页面中定义激励视频广告
				let videoAd = null
				// 在页面onLoad回调事件中创建激励视频广告实例
				if (wx.createRewardedVideoAd) {
				  videoAd = wx.createRewardedVideoAd({
				    adUnitId: that.xcx_ad.jili
				  })
				  videoAd.onLoad(() => {})
				  videoAd.onError((err) => {})
				  videoAd.onClose((res) => {
					  if(res&&res.isEnded){
							//看完广告了
							that.sign()
					  }else{
							that.msg('观看完广告之后即可签到成功哦')
					  }
				  })
				}
				// 用户触发广告后，显示激励视频广告
				if (videoAd) {
				  videoAd.show().catch(() => {
				    // 失败重试
				    videoAd.load()
				      .then(() => videoAd.show())
				      .catch(err => {
				        console.log('激励视频 广告显示失败')
				      })
				  })
				}
			},
		
		}
	}
</script>
<style>
	page{background-color: #F5F5F5;}
	.e4 .u-transition{width: 100%;height: 100%;}
	.e2 .u-transition{width: 100%;height: 100%;}
	.e1 .u-transition{width: 100%;height: 100%;}

</style>
<style scoped>
	
	@keyframes big{
	    0%{
	      transform: scale(1);  /*开始为原始大小*/
	  }
	  25%{
	      transform: scale(1.2); /*放大1.1倍*/
	  }
	  50%{
	      transform: scale(1);
	  }
	  75%{
	      transform: scale(1.2);
	  }
	}
	
	
	.share-box{height: 60rpx;line-height: 60rpx;background-color: #0066ff;color: #FFFFFF;text-align: center;
		font-size: 30rpx;border-radius: 10rpx;letter-spacing: 10rpx;margin: 20rpx 0;padding: 0 20rpx;animation: big 2s linear infinite;}
	.share{justify-content: space-between;}
	
	
	.tips_detail .t1 view{line-height: 40rpx;}
	.tips_detail .t1{width: 650rpx;color: #0066FF;}
	.tips_detail .title{font-size: 40rpx;font-weight: bold;color: #0066FF;}
	.tips_detail{height: 695rpx;background-color: #FFFFFF;}
	.e4{width: 600rpx;height: 255rpx;}
	
	.e3 .v2 .t2,.e3 .v2 .t1{height: 50rpx;line-height: 50rpx;}
	.e3 .v2{width: 330rpx;height: 100rpx;color: #0066FF;}
	.e3 .v1{width: 250rpx;height: 100rpx;background-color: #FFFFFF;line-height: 100rpx;font-size: 40rpx;font-weight: bold;color: #0066FF;}
	.e3{width: 600rpx;height: 100rpx;}
	
	.e2 .ul .li2 .p2{width: 80rpx;height: 80rpx;position: absolute;right: -50rpx;top: -40rpx; transform: rotate(25deg); }
	.e2 .ul .li2 .p1{width: 80rpx;margin-left: 80rpx;height: 80rpx;margin-top: 35rpx;}
	.e2 .ul .li2 .v2{position: absolute;bottom: 10rpx;left: 0;font-size: 20rpx;font-weight: bold;}
	.e2 .ul .li2 .v1{position: absolute;top: 10rpx;left: 0;font-weight: bold;font-size: 20rpx;}
	.e2 .ul .li2{margin-left: 40rpx;width: 240rpx;height: 150rpx;background-color: #F5F5F5;position: relative;margin-top: 52rpx;}
	.e2 .ul .li .p2{width: 80rpx;height: 80rpx;position: absolute;right: -50rpx;top: -40rpx; transform: rotate(25deg); }
	.e2 .ul .li .p1{width: 80rpx;margin-left: 10rpx;height: 80rpx;margin-top: 35rpx;}
	.e2 .ul .li .v1{position: absolute;top: 10rpx;left: 0;font-weight: bold;font-size: 20rpx;}
	.e2 .ul .li .v2{position: absolute;bottom: 10rpx;left: 0;font-size: 20rpx;font-weight: bold;}
	.e2 .ul .li{margin-left: 40rpx;width: 100rpx;height: 150rpx;background-color: #F5F5F5;position: relative;margin-top: 52rpx;color: #999999;}
	.e2 .tips{width: 520rpx;margin-left: 40rpx;font-weight: bold;}
	.e2 .title{width: 520rpx;font-weight: bold;margin-left: 40rpx;color: #0066FF;border-bottom: 1px solid #0066FF;padding-bottom: 15rpx;}
	.e2{height: 600rpx;background-color: #FFFFFF;width: 600rpx;position: relative;}
	
	.e1 .avatar{width: 50rpx;height: 50rpx;border-radius: 100%;margin-right: 25rpx;}
	.e1 .right .v1{height: 50rpx;line-height: 60rpx;color: #0066FF;}
	.e1 .right{width: 210rpx;border-bottom: 1px solid #0066FF;}
	.e1 .left{width: 400rpx;font-size: 40rpx;font-style: italic;color: red;font-weight: bold;padding-left: 25rpx;border-left: 3rpx solid #0066FF;}
	.e1{height: 50rpx;}
	
	.sign_c{color: #0066FF;}
	
	
	button::after{
	 	border: none;
	}
	button{
		border-radius: 0!important;
		position: relative;
		display: block;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		line-height: 0;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		background-color: transparent;
	}
	
	
</style>